<template>
  <v-table
    :data="tableData" 
    border
    @selection-change="selectionChange"
  >
    <!-- 展示多选 -->
    <el-table-column
      v-if="pageConfig.showSelection"
      type="selection"
      :selectable="selectHandle"
    >
    </el-table-column>
    <!-- 展示索引 -->
    <el-table-column
      v-if="pageConfig.showIndex"
      type="index"
      label="序号"
      width="60"
    >
    </el-table-column>
    <!-- 表格渲染 -->
    <template v-for="(item, index) in pageConfig.columns" :key="index">
      <!-- 数据展示 -->
      <v-table-column
        v-if="!item.isEdit"
        v-bind="item"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <!-- 图片 -->
          <span
            v-if="item.isPic"
            class="table-page-img">
            <v-image
            style="width: 100px; height: 100px"
            :src="row[item.prop]"
            ></v-image>
          </span>
          <!-- 数组 -->
          <template v-else-if="item.type === 'array'">
            <el-tag  style="margin:5px" 
              v-for="(item, index) in row[item.prop]" :key="item.id">
                {{
                  item.valueName 
                }}
            </el-tag>
          </template>
          <!-- 普通字段 -->
          <span v-else>
            {{ row[item.prop] }}
          </span>
        </template>
      </v-table-column>
      <!-- 操作按钮 -->
      <v-table-column
        v-if="item.isEdit"
        :fixed="item.isFixed ? 'right' : false"
        :label="item.label"
        :width="editColumnWidth"
      >
        <template #default="{ row }">
          <!-- 根据宽度展示按钮 -->
          <template v-for="(item, index) in editBnts[0]" :key="index">
            <el-button
              size="small" :icon="item.icon" @click="setRole(item, row)"
              :disabled="btnDisable(item.display, row)"
              :title="item.text"
            >
              <!-- <span class="btn-test">{{ item.text }}</span> -->
            </el-button>
          </template>
          <!-- 下拉显示 -->
          <el-dropdown v-if="editBnts[1].length > 0"
            :placement="'bottom'"
          >
            <span class="el-dropdown-link">
              更多
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in editBnts[1]" :key="index">
                  <el-button
                    size="small" :icon="item.icon" @click="setRole(item, row)"
                    :disabled="btnDisable(item.display, row)"
                  >
                    {{ item.text }}
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </v-table-column>
    </template>
  </v-table>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
  // 数据
  tableData: {
    type: Array,
    default: () => []
  },
  // 配置
  pageConfig: {
    type: Object,
    default: () => {}
  }
})
// 根据编辑个数是否展示更多
const editBnts = computed(() => {
  const arr = props.pageConfig.editBtns
  const editNum = props.pageConfig.editBtns.length
  const result = []  
  result[0] = arr.slice(0, 3)
  result[1] = arr.slice(3, editNum)
  return result
})
// 限制编辑列宽度
const editColumnWidth = computed(() => {
  const width = props.pageConfig.columns.filter((item: any) => item.isEdit)[0].width
  // 按钮个数
  const editNum = props.pageConfig.editBtns.length
  if(editNum > 3) return '240'  
  return (editNum *60).toString()
})
// 设置角色
const emit = defineEmits(['changeSelect', 'changeEdit'])
// 选中行
const selectionChange = (val: any) => {
  emit('changeSelect', val)
}
// 是否可选
const selectHandle = (row: any) => {
  if (row.selectDisabled) return false
  return true
}
// 编辑按钮
const setRole = (item: any, row?: any) => {
  emit('changeEdit', { item, row })
}
// 按钮禁用的判断
const btnDisable  = (display, row) => {
  if (!display) return false
  // 判断是否是函数
  if (typeof display === 'function') return display(row)
  // // 判断是否是字符串
  // if (__isString(display)) {
  //   const { prop, value } = display
  //   if (row[prop] === value) return true
  // }
  // return display && __isString(display(row))
}

</script>

<style scoped>
.el-dropdown{
  height: 24px;
  margin-left: 5px;
  line-height: 24px;
}
.el-dropdown-link{
  font-size: 13px;
}
.table-page-img{
  width: 100px;
  height: 100px;
}
</style>